<template>
  <div class="page">
    <div class="task-list">
      <div class="option-box">
        <span class="box-item">
          <span class="label">任务名称：</span>
          <span class="text">潘婷日常圈数任务</span>
        </span>
        <span class="box-item">
          <span class="label">品牌：</span>
          <span class="text">潘婷</span>
        </span>
      </div>
      <div class="task-header">
        <a-row>
          <a-col :span="16">
            <a-row>
              <a-col :span="10">
                <a-form-item>
                  <a-input
                    v-model:value="formState.name"
                    placeholder="请输入指标名称、描述关键词进行查找"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="4" style="margin-left: 10px">
                <a-button type="primary">搜索</a-button>
                <a-button style="margin-left: 10px">重置</a-button>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="8" style="text-align: right">
            <a-button type="primary" @click="globeVariableReplace()"> 全局变量替换 </a-button>
            <a-button type="primary" style="margin-left: 10px" @click="addAnalyseIndex()">
              添加分析指标
            </a-button>
            <a-button type="primary" style="margin-left: 10px" @click="addIndex">
              添加指标
            </a-button>
          </a-col>
        </a-row>
      </div>

      <div class="task-table">
        <a-table :columns="columns" :data-source="data">
          <template #index="{ index }">
            <span>{{ index + 1 }}</span>
          </template>
          <template #createTime="{ text }">
            <span>{{ text }}</span>
          </template>
          <template #realTimeActive="{ record }">
            <span>
              <a-switch
                checked-children="是"
                un-checked-children="否"
                default-checked
                @change="handleChangeRealTime(record)"
              />
            </span>
          </template>
          <template #isStartUse="{ record }">
            <span>
              <a-switch
                checked-children="是"
                un-checked-children="否"
                default-checked
                @change="handleChangeStartUse(record)"
              />
            </span>
          </template>
          <template #active="{ record }">
            <span>
              <a href="javascript:;" @click="handleActive(record, 'edit')">编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm
                title="确定删除当前这个指标?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="confirmDelete"
                @cancel="cancelDelete"
              >
                <a href="javascript:;">删除</a>
              </a-popconfirm>
              <a-divider type="vertical" />
              <a href="javascript:;" @click="handleActive(record, 'up')">上移</a>
              <a-divider type="vertical" />
              <a href="javascript:;" @click="handleActive(record, 'down')">下移</a>
            </span>
          </template>
        </a-table>
      </div>
      <div>
        <GlobeVariableReplaceModal
          :visible="globeVariableReplaceVisible"
          @cancelFn="globeVariableReplaceClose"
        />
        <AddAnalyseIndexModal :visible="addAnalyseIndexVisible" @cancelFn="closeAnalyseIndex" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Moment } from "moment";
import { TableDataType } from "@/shims/globe";
import GlobeVariableReplaceModal from "../components/GlobeVariableReplaceModal.vue";
import AddAnalyseIndexModal from "../components/AddAnalyseIndex.vue";
import { columns } from "./config";

export default defineComponent({
  components: {
    GlobeVariableReplaceModal,
    AddAnalyseIndexModal
  },
  setup() {
    const router = useRouter();

    const dates = ref<Moment[]>([]);
    const value = ref<Moment[]>();
    const formState = reactive({
      name: ""
    });
    const disabledDate = (current: Moment) => {
      if (!dates.value || dates.value.length === 0) {
        return false;
      }
      const diffDate = current.diff(dates.value[0], "days");
      return Math.abs(diffDate) > 7;
    };

    const onOpenChange = (open: boolean) => {
      if (open) {
        dates.value = [];
      }
    };

    const onChange = (val: Moment[]) => {
      value.value = val;
    };

    const onCalendarChange = (val: Moment[]) => {
      dates.value = val;
    };
    const globeVariableReplaceVisible = ref<boolean>(false);
    const globeVariableReplace = () => {
      globeVariableReplaceVisible.value = true;
    };
    const globeVariableReplaceClose = () => {
      globeVariableReplaceVisible.value = false;
    };
    const addAnalyseIndexVisible = ref<boolean>(false);
    const addAnalyseIndex = () => {
      addAnalyseIndexVisible.value = true;
    };
    const closeAnalyseIndex = () => {
      addAnalyseIndexVisible.value = false;
    };
    const addIndex = () => {
      router.push({
        name: "CreateIndex",
        query: {
          source: "create"
        }
      });
    };
    const data: TableDataType[] = [
      {
        key: "1",
        name: "当天店铺会员规模",
        description: "粉丝会员数量",
        createTime: "2021-08-30 18:11:34"
      },
      {
        key: "2",
        name: "当天店铺会员规模",
        description: "粉丝会员数量",
        createTime: "2021-08-30 18:11:34"
      },
      {
        key: "3",
        name: "当天店铺会员规模",
        description: "粉丝会员数量",
        createTime: "2021-08-30 18:11:34"
      }
    ];
    const handleChangeRealTime = (record: any) => {
      console.log(record);
    };
    const handleChangeStartUse = (record: any) => {
      console.log(record);
    };
    const confirmDelete = (record: any) => {
      console.log(record);
    };
    const cancelDelete = (record: any) => {
      console.log(record);
    };
    const handleActive = (record: any, type: string) => {
      console.log(record);
      switch (type) {
        case "edit":
          router.push({
            name: "CreateIndex",
            query: { ...record, source: "edit" }
          });
          break;
        case "up":
          break;
        case "down":
          break;
      }
    };
    return {
      formState,
      dates,
      value,
      disabledDate,
      onOpenChange,
      onChange,
      onCalendarChange,
      data,
      columns,
      handleChangeRealTime,
      handleChangeStartUse,
      handleActive,
      confirmDelete,
      cancelDelete,
      globeVariableReplace,
      addAnalyseIndex,
      addIndex,
      globeVariableReplaceVisible,
      addAnalyseIndexVisible,
      globeVariableReplaceClose,
      closeAnalyseIndex
    };
  }
});
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
